<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch, ref} from 'vue'
import { TableData } from '@/api/table/types'
import { useValidator } from '@/hooks/web/useValidator'
import { FormSchema } from '@/types/form'
import { ElInput, ElForm,ElFormItem } from 'element-plus'

const { required } = useValidator()

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})

const rules = reactive({
  title: [required()],
  author: [required()],
  importance: [required()],
  pageviews: [required()],
  display_time: [required()],
  content: [required()]
})
let searchSchema = reactive<FormSchema[]>([
  {
    field: 'account',
    label: '用户账号',
    component: 'Input',
    componentProps:{
      disabled: true,
    }
  },
  {
    field: 'feedbackType',
    label: '反馈类型',
    component: 'Select',
    componentProps: {
      options: [
        {
          label:'请选择类型',
          value:''
        },
        {
          label:'视频反馈',
          value:2
        },
        {
          label:'商品反馈',
          value:3
        },
        {
          label:'其他反馈',
          value:4
        }
      ],
      disabled: true,
    }
  },
  {
    field: 'feedbackClassification',
    label: '意见反馈',
    component: 'Select',
    componentProps: {
      options: [
        {
          label:'请选择分类',
          value:''
        },
        {
          label:'很好',
          value:2
        },
        {
          label:'好',
          value:3
        },
        {
          label:'一般',
          value:4
        },
        {
          label:'差',
          value:5
        }
      ],
      disabled: true,
    }
  },
  {
    field: 'createDate',
    label:'反馈时间',
    component: 'DatePicker',
    componentProps:({
      disabled: true,
      type: 'datetime',
    })
  },
])
const { register, methods, elFormRef } = useForm({
  schema: searchSchema
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    const { setValues } = methods
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  elFormRef,
  getFormData: methods.getFormData
})
</script>

<template>
    <Form :rules="rules" @register="register"/>
  <div style="width: 700px">
    <El-form-item label="反馈内容">
      <El-input v-model="props.currentRow.feedbackContent" type="textarea" disabled="true"/>
    </El-form-item>
  </div>
  <div style="width: 700px;border-bottom: 5px solid #E6E6E6;margin-bottom: 20px">
    <div style="display: inline-block;vertical-align: middle">
      <Icon icon="ic:baseline-image" size="26" />
    </div>
    <div style="display: inline-block;">
      反馈图片
    </div>
  </div>
  <div style="width: 700px;">
    <img src="./2.jpg" style="width: 200px;margin: 0 auto;">
  </div>
</template>
